<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>

<div id="app" >
    第三步：使用组件
    <std-com></std-com>
</div>
<script>
    //第一步：定义组件
    var std_com={
        // el:'' //组件中不能写el属性，否则报错
        template:`
            <div>
                姓名：{{name}} <br/>
                年龄：{{age}} <br/>
                身高：{{length}} <br/>
            </div>`, //最外面必须有且只有一个html标签，否则不显示。``是模板符号，可以换行
        data: function(){//组件中的data，必须是函数，且返回对象.不能直接写对象，否则不可用
            return {
                name:'李雷',
                age:20,
                length:1.82
            }
        }
    }
    //第二步：注册全局组件
    Vue.component("std-com",std_com)
    var app = new Vue({
        el: '#app',
        data: {//组件中的数据在组件的data中，所以vue中的data就为空
        }
    })
</script>

</body>
</html>